<template>
    <div>
        <el-card>
            <div class="searchContent">
                <el-form ref="queryForm" :inline="true" :model="queryParams" class="demo-form-inline">
                    <el-form-item label="登陆账户">
                        <el-input type="text" placeholder="请输入登陆账户" class="width1" v-model="queryParams.account"></el-input>
                    </el-form-item>
                    <el-form-item label="登陆状态">
                        <el-select v-model="queryParams.status" clearable class="width1" placeholde="请选择登陆状态">
                            <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="登陆时间">
                        <el-date-picker class="width1" v-model="queryParams.createTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                </el-form>

                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button type="danger" icon="el-icon-delete" @click="delLog()">删除</el-button>
                        <el-button type="danger" icon="el-icon-delete-solid" @click="emptyLog()">清空</el-button>
                    </el-col>
                </el-row>
            </div>

            <el-table :data="logList" v-loading="loading" stripe border size="small">
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        {{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="ip" label="登录IP"></el-table-column>
                <el-table-column prop="account" label="登录账户"></el-table-column>
                <el-table-column prop="descript" label="登录描述" width="210"></el-table-column>
                <el-table-column prop="status" align="center" label="登陆状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status | tagClass">
                            {{scope.row.status | statusText(statusTextDict)}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="登录时间" width="200"></el-table-column>
                <el-table-column prop="location" label="登录位置" min-width="100"></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" class="text-button-danger" size="mini" icon="el-icon-delete" @click="delOneLog(scope.row.logId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getLogList"
            />
        </el-card>
    </div>
</template>


<script>
    import { list } from '@/api/monitor/loginlog'
    export default {
        name: "loginlog",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 表格数据
                logList: [],
                // 总条数
                total: 0,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    account: undefined,
                    createTime: undefined,
                    status: undefined
                },
                statusOptions: [
                    { label: '成功', value: 0 },
                    { label: '失败', value: 1 },
                ],
                statusTextDict: {
                    '0': '成功',
                    '1': '失败'
                }
            }
        },
        created() {
            this.getLogList();
        },
        filters: {
            statusText(val, statusTextDict) {
                return statusTextDict[val];
            },
            tagClass(val) {
                if (val === undefined) {
                    return
                }
                if (val === '0') {
                    return 'success'
                } else if (val === '1') {
                    return 'danger'
                }
            }
        },
        methods: {
            search() {
                this.queryParams.pageNum = 1;
                this.getLogList();
            },
            delLog() {

            },
            delOneLog(logId) {

            },
            emptyLog() {

            },
            // 查询登录日志
            getLogList() {
                this.loading = true;
                list(this.queryParams).then(res => {
                    this.logList = res.data.rows;
                    this.total = res.data.total;
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                });
            },

        }

    }
</script>

<style lang="scss" scoped>
    .searchContent {
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .width1 {
        width: 180px;
        margin-right: 10px;
    }
</style>
